<template>
  <div class="vx-common-res">
    <!-- 步骤条 -->
    <vx-title-bar :current="titleBarCur" :list="titleBarArr" />
    <!-- 结果状态 -->
    <vx-result :res-detail="resDetail" :title="title" :show-serial-num="showSerialNum" class="mg-bt-20">
      <slot name="result-slot"></slot>
    </vx-result>

    <slot></slot>
    <slot name="res-footer">
      <div class="text-center mg-top-50 mg-bt-150">
        <ui-button class="primary-long-btn" @click="confirm">{{ confirmBtn }}</ui-button>
      </div>
    </slot>
    <slot name="res-tips"> </slot>
  </div>
</template>

<script>
export default {
  name: 'vx-common-res',
  props: {
    // 步骤条内容
    titleBarArr: {
      type: Array,
      default: () => {
        return ['交易录入', '交易确认', '交易结果'];
      },
      validate: (val) => {
        if (typeof val === 'object' && val instanceof Array && val.length >= 2) {
          return true;
        }
        console.error('请确认titleBarArr格式正确');
        return false;
      },
    },
    // 当前步骤
    titleBarCur: {
      type: [String, Number],
      default: 3,
    },
    // 结果详情
    resDetail: {
      type: Object,
      default: () => {},
    },
    // 结果状态文本
    title: {
      type: String,
    },
    // 展示交易流水号
    showSerialNum: {
      type: Boolean,
      default: false,
    },
    // 按钮文本
    confirmBtn: {
      type: String,
      default: '完成',
    },
  },
  data() {
    return {};
  },
  methods: {
    // 完成按钮点击回调
    confirm() {
      this.$emit('confirm');
    },
  },
};
</script>
